<style lang="less">
  .page-container {
    .pgs {
      width: 300px;
      background-color: #D8D4D1;
      text-align: center;
      position: relative;
      height: 2px;
      margin-bottom: 10px;
    }

    .pgs-play {
      position: absolute;
      top: -2.5px;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #B03F28;
      z-index: 1;
    }

    .play-icon {
      width: 45px;
      height: 45px;
      margin-right: 15px;
    }

    audio {
      display: block;
      height: 0;
    }

    .audio-box {
      background: #F5F5F5;
      border: 1px solid #D8D4D1;
      border-radius: 5px;
      width: 100%;
      padding: 15px 12px;
      box-sizing: border-box;
    }

    .audio-name {
      font-size: 15px;
      color: #252120;
      margin-bottom: 15px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }

    .control-row {
      display: flex;
      align-items: flex-end;
    }

    .row-right {
        width: 100px;
      flex-grow: 100;
    }

    .time-row {
      position: relative;
      color: #B0AFAD;
      font-size: 12px;
      margin-bottom: 3px;
    }

    .audio-time {
      position: absolute;
      right: 0;
    }
  }
</style>

<template>
  <div class="page-container">
    <div v-for="(item, index) in content" :key="index" class="list-box">
      <audio ref="audio" src="../assets/By2 - 你并不懂我 - 副本.mp3" controls @loadedmetadata="fillTime($event, index)"
        @timeupdate.stop="updateProgress(index)" @ended.stop="audioEnded(index)">
      </audio>
      <!-- 音频名字 -->
      <div class="audio-name">{{ item.audio_name }}</div>
      <div class="control-row">
        <!-- 控制播放暂停的按钮 -->
        <img src="../assets/image/audio/audio_play.png" class="play-icon" alt="" @click="playAudio(index)" ref="qqq">
        <div class="row-right" ref="ccc">
          <!-- 进度条 -->
          <div class="pgs"  >
            <div class="pgs-play"></div>
          </div>
          <!-- 当前播放时长和总时长 -->
          <div class="time-row">
            <span class="played-time">{{ audioArr[index].currentTime }}</span>
            <span class="audio-time">{{ audioArr[index].duration }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        audioNodes: [],    // 用于存放所有 audio 的 DOM 节点
        audioArr: [{ duration: '', currentTime: '00:00' }],       // 用于维护 audio 的总时长和当前播放时间的数组
        content: [           // 存放audio的地址信息，一般是接口返回
            {"audio_name":"20210112_1056.m4a"},

        ]
      }
    },
    mounted() {
      this.audioNodes = document.getElementsByClassName('list-box')
    //   this.audioArr.push()
    //   this.content.forEach((item, index) => {
    //     this.$set(this.audioArr, index, { duration: '', currentTime: '00:00' })
    //   })
    },
    methods: {
      // 切换播放，暂停按钮的事件
      playAudio(index) {
        let audio = this.audioNodes[index].firstChild
        if (audio.paused) {
          audio.play()
        } else {
          audio.pause()
        }
      },
      
      // 获取音频的总时长
      fillTime(event, index) {
        this.audioArr[index].duration = this.transTime(event.target.duration)
      },

      // 将秒数转化成(分:秒)格式
      transTime(time) {
        let duration = parseInt(time)
        let minute = parseInt(duration / 60).toString().padStart(2, '0')
        let sec = (duration % 60).toString().padStart(2, '0')
        return `${minute}:${sec}`
      },

      // 进度条播放的事件
      updateProgress(index) {
        let audio = this.audioNodes[index].firstChild
        let value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0)
        this.audioArr[index].currentTime = this.transTime(audio.currentTime)
        let progressTag = this.audioNodes[index].getElementsByClassName('pgs-play')[0]
        progressTag.style.left = `${value}%`
      },

      // 播放结束的处理动作
      audioEnded(index) {
        let audio = this.audioNodes[index].firstChild
        audio.currentTime = 0
        audio.pause()
      },
    }
  }
</script>